<template>
  <div class="wallet-box">
    <van-nav-bar
      title="抽奖"
      left-arrow
      @click-left="onClickLeft"
      class="nav-bar"
    />
    <div class="draw-words">
      <img src="/static/img/draw/bg-word.png">
    </div>
    <div class="roll-box">
      <!-- 背景 -->
      <img
        src="/static/img/draw/roll-box.png"
        class="roll-under"
        :style="{transform: rotate_angle,transition: rotate_transition}"
      >
      <!-- 背景阴影 -->
      <img
        src="/static/img/draw/roll-shadow.png"
        class="roll-shadow"
      >
      <!-- 按钮 -->
      <img
        src="/static/img/draw/roll-btn.png"
        class="roll-btn" v-if="switch_draw"
        @click="clickRoll"
      >
    </div>
  </div>
</template>

<script>
  import { Toast } from 'vant';
  import { Dialog } from 'vant';

  export default {
    data(){
      return {
        config: {
          value: 'https://www.baidu.com',
          imagePath: './examples/assets/logo.png',
          filter: 'color'
        },
        erweimaControl:true,
        islogin:false,
        downloadButton: false,
        //  用户账l号信息
        accountList: [],
        imgsrc:"",
        userid:"",
        obtInfo:'',
        ji_status:'',
        userAvatar: '',
        nickname: '',
        lastPageUrl:"",
        // 转盘
        easejoy_bean: 0, //金豆
        lottery_ticket: 0, //抽奖次数
        prize_list: [], //奖品列表
        toast_control: false, //抽奖结果弹出框控制器
        toast_title: "恭喜你，获得10积分", //抽奖结果文本反馈
        toast_back: false, //抽奖结果toast中是否为确认按钮
        start_rotating_degree: 0, //初始旋转角度
        rotate_angle: 0, //将要旋转的角度
        start_rotating_degree_pointer: 0, //指针初始旋转角度
        rotate_angle_pointer: 0, //指针将要旋转的度数
        rotate_transition: "transform 6s ease-in-out", //初始化选中的过度属性控制
        rotate_transition_pointer: "transform 12s ease-in-out", //初始化指针过度属性控制
        click_flag: true, //是否可以旋转抽奖
        index: 0, //测试使用
        switch_draw:false,
        //最终会旋转到下标的位置所需要的度数
        result_angle: {
          '500': 0,
          '300': 60,
          '100': 120,
          '50': 180,
          '30': 240,
          '10': 300
        }
        // 转盘-over
      }
    },
    created(){

    },
    mounted(){
      Dialog.alert({
        title: '抽奖',
        message: '凡账户激活成功（未激活成功无法抽奖），点击如下图所示的快乐大转盘，获取奖品有OBT（10/30/50/100/300/500）'
      }).then(() => {
        // on close
      });

      this.lastPageUrl = sessionStorage.getItem("lastAndNowPage").split('-')[1];
      sessionStorage.setItem("lastAndNowPage",this.lastPageUrl+"-/wallet")
      if(!sessionStorage.getItem("usermessage")) {
        this.$router.push('/login');
      }
      token_g = JSON.parse(sessionStorage.getItem("usermessage")).token;
      this.ji_status = JSON.parse(sessionStorage.getItem("ji_status"));
      this.getInit();
    },
    methods:{
      onClickLeft() {
        this.$router.push('/wallet')
      },
      getInit(){
        let cont = {
        type:'LUCKY_DRAW_FLAG'
      }
      this.$axios({
        method: 'GET',
        url: url_g + '/config/',
        params: cont,
        headers: {
          'Authorization': 'Bearer ' + token_g
        }
      }).then((res) => {
        if(res && res.data && res.data.results && 0 < res.data.results.length){
          if(res.data.results[0].value === "Y"){
            this.switch_draw = true;
          }else if(res.data.results[0].value === "N"){
            this.switch_draw = false;
          }
          
        }
      }).catch((e) => {
              Toast(e.response.data.detail);
      });
      },
      clickRoll() {
        this.$axios({
          method: "GET",
          url: url_g + "/luckydraw/draw/",
          headers: {
            'Authorization': 'Bearer ' + token_g
          }
        }).then((res) => {
          console.log(res)
          if(res && res.data){
            this.index = res.data.quantity //指定每次旋转到的奖品下标
            //这个函数是转动函数，需要传入奖品对应下标，如果没有传入,则随机
            this.rotating(this.index)
          }
        }).catch((e)=>{
          Toast(e.response.data.detail);
        })
      },
      rotating(index) {
        if (!this.click_flag) return;
        // 默认为 0  转盘转动
        let type = 0
        // 默认为1s
        let during_time = 5
        //随机下标
        let random = Math.floor(Math.random() * 7)
        // 最终要旋转到哪一块，对应prize_list的下标
        let result_index = index || random
        let result_angle = this.result_angle[result_index]
        // 附加多转几圈
        let rand_circle = 3
        // 旋转结束前，不允许再次触发
        this.click_flag = false
        if (type == 0) {
          // 转动盘子
          let rotate_angle =
            this.start_rotating_degree +
            rand_circle * 360 +
            result_angle -
            this.start_rotating_degree % 360
          // 这里为计算旋转的角度，考虑第一次旋转后的结果
          this.start_rotating_degree = rotate_angle
          this.rotate_angle = "rotate(" + rotate_angle + "deg)"
          let that = this
          // 旋转结束后，允许再次触发
          setTimeout(function() {
            that.click_flag = true
            that.rotateOver()
          }, during_time * 1000 + 1500) // 延时，保证转盘转完
        } else {
          //
        }
      },
      rotateOver() {
        Dialog.alert({
          title: '恭喜',
          message: `恭喜您中了${this.index}枚OBT！`
        }).then(() => {
          // on close
        });
      }
    }
  }
</script>

<style scoped>
.wallet-box {
  position: relative;
  height: calc(100vh -46px);
  background: url('/static/img/draw/bg.png') center center no-repeat;
  color: #fff;
  overflow: hidden;
  height:100vh;
}
.nav-bar {
  color: #000;
}
.draw-words {
  display: flex;
  justify-content: center;
  align-items: center;
}
.draw-words img {
  margin-top: 30px;
  width: 90%;
}
.roll-box {
  position: absolute;
  top: 170px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.roll-under {
  width: 90%;
  z-index: 9;
}
.roll-shadow {
  position: absolute;
  bottom: -10px;
  width: 250px;
}
.roll-btn {
  position: absolute;
  width: 40%;
  z-index: 10;
}
</style>
